<template>
  <div>
    <el-button style="position: absolute;left: 330px"
               type="primary" plain @click="dialogVisible=true">查看已发货用户</el-button>
    <br>
    <br>
    <br>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose">

      <el-table
        :data="list"
        border
        style="width: 100%">
        <el-table-column
          prop="id"
          label="编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 0" style="color: red">未发货</span>
            <span v-if="scope.row.state == 1" style="color: green">已发货</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="parcelid"
          label="快递单编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="gtime"
          label="创建时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="price"
          label="支付单价"
          width="180">
        </el-table-column>
        <el-table-column
          prop="date" :formatter="dateFormat"
          label="支付时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="province"
          label="省"
          width="180">
        </el-table-column>
        <el-table-column
          prop="city"
          label="市"
          width="180">
        </el-table-column>
        <el-table-column
          prop="district"
          label="区/县"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="详细地址"
          width="180">
        </el-table-column>
        <el-table-column
          prop="namea"
          label="图书名字"
          width="180">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
        width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.state == 0" style="color: red">未发货</span>
          <span v-if="scope.row.state == 1" style="color: green">已发货</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="parcelid"
        label="快递单编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="gtime"
        label="创建时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="price"
        label="支付单价"
        width="180">
      </el-table-column>
      <el-table-column
        prop="num"
        label="商品数量"
        width="180">
      </el-table-column>
      <el-table-column
        prop="date" :formatter="dateFormat"
        label="支付时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="province"
        label="省"
        width="180">
      </el-table-column>
      <el-table-column
        prop="city"
        label="市"
        width="180">
      </el-table-column>
      <el-table-column
        prop="district"
        label="区/县"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="详细地址"
        width="180">
      </el-table-column>
      <el-table-column
        prop="namea"
        label="图书名字"
        width="180">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button type="primary"
                     icon="el-icon-edit"
                     @click="upd(scope.row)"  size="small">发货</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      small
      layout="total,prev, pager, next"
      :page-size="pageSize"
      :total="total" @current-change="page">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "Role",

  data(){
    return  {
      total: 0,
      pageSize: 6,
      tableData: [],
      dialogVisible:false,
      list:[]
    }
  },
  //初始化
  created() {
   this.find()
   // this.sel()
  },
  methods:{
    find(){
      this.$http.post("backservice/forder/findpage?pageNum=0&pageSize=" + this.pageSize).then(response => {
        console.log(response.userList)
        this.tableData = response.userList
        this.total = response.TotalNum
      })
    },
    page(currentPage) {
      this.$http.post('backservice/forder/findpage?&pageNum=' + (currentPage - 1) + '&pageSize=' + this.pageSize)
        .then(response => {
          this.tableData = response.userList
        })
    },
    upd(row){
       this.$http.post('backservice/forder/deliver',{id:row.id}).then(data=>{
         if (data>0){
           this.find()
           this.sel()
           alert("发货成功")
           this.$http.post('backservice/forder/updatenum',{num:row.num,book:row.book})
         }else {
           alert("发货失败")
         }
       })
    },
    dateFormat(row, column, cellValue, index) {
      const daterc = row[column.property]
      if (daterc != null) {
        var date = new Date(daterc);
        var year = date.getFullYear();
        /* 在日期格式中，月份是从0开始，11结束，因此要加0
         * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
         * */
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        // 拼接
        return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    sel(){
        this.$http.post('backservice/forder/select').then(data=>{
          console.log(data)
          this.list=data
        })
    }

  }

}
</script>

<style scoped>

</style>
